<template>
		<uv-keyboard ref="keyboardRef" :mode="mode" :dotDisabled="dotDisabled"
			:closeOnClickConfirm="closeOnClickConfirm" :tips="keyboardValue ? keyboardValue : keyboardTips"
			:closeOnClickOverlay="false" @backspace="keyboardBackspace" @change="keyboardChange"
			@confirm="keyboardConfirm" @cancel="handleCancel"></uv-keyboard>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue"

	const props = defineProps({
		// tips: {
		// 	type: String,
		// 	default: "请输入"
		// },
		mode: {
			type: String,
			default: "number"
		},
		dotDisabled: {
			type: Boolean,
			default: true
		},
		closeOnClickConfirm: {
			type: Boolean,
			default: false
		},
		maxValLength: {
			type: Number,
			default: 20
		}
	})

	// const options = reactive({
	// 	tips: "",
	// 	mode: "number",
	// 	dotDisabled: true
	// })

	const emit = defineEmits(['confirm', 'change', 'cancel'])
	const keyboardRef = ref()
	const keyboardTips = ref("请输入")
	const keyboardValue = ref("")
	// 虚拟键盘退格键
	function keyboardBackspace() {
		keyboardValue.value = keyboardValue.value.substr(0, keyboardValue.value.length - 1)
		emit('change', keyboardValue.value)

	}
	// 虚拟键盘数字点击事件
	function keyboardChange(e) {
		if (keyboardValue.value.length * 1 >= props.maxValLength * 1) {
			uni.$uv.toast('最多输入' + props.maxValLength + '位数值');
			return
		}
		keyboardValue.value += e
		emit('change', keyboardValue.value)
	}
	// 虚拟键盘确认键
	function keyboardConfirm() {
		emit('confirm', keyboardValue.value)
	}

	function open(tips, val) {
		keyboardValue.value = val ? val + '' : ''
		keyboardTips.value = tips

		if (keyboardValue.value * 1 === 0) {
			keyboardValue.value = ''
		}

		keyboardRef.value.open()
	}

	function close() {
		keyboardRef.value.close()
	}

	function handleCancel() {
		emit('cancel', keyboardValue.value)
	}

	defineExpose({
		open,
		close
	})
</script>

<style scoped lang="scss">
</style>